<template>
  <el-container>
    <el-header>
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/main/staffinfo">员工信息</el-menu-item>
        <el-menu-item index="/main/shopinfo">门店信息</el-menu-item>
        <el-menu-item index="/main/stafflogin">员工登录日志</el-menu-item>
        <el-menu-item index="/main/position">职位管理</el-menu-item>
        <!-- <el-menu-item index="/main/jurisdiction">权限管理</el-menu-item> -->
      </el-menu>
    </el-header>
    <el-main class="tablem">
      <div class="border">
        <div class="tablepad">
          <span style="margin-right: auto">员工登录日志</span>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="alldelete"
            >批量删除</el-button
          >
        </div>
        <div class="tablepad">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            class="fontsize"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="员工编号" width="100">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="100">
            </el-table-column>
            <el-table-column
              prop="loginTime"
              label="登录时间"
            ></el-table-column>
            <el-table-column prop="loginIp" label="登录IP"></el-table-column>
            >
          </el-table>
        </div>
        <div class="page">
          <Page @shareData="shareData" :totalCount="count"></Page>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Page from "../../components/common/Pagination.vue";
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      ids: "",
      // 条数
      pageCount: 5,
      // 页数
      nowPage: 1,
      // 总条数
      count: 0,
    };
  },
  components: {
    Page,
  },

  methods: {
    shareData(v) {
      // console.log(v);
      this.pageCount = v.pageCount;
      this.nowPage = v.nowPage;
      // console.log("条数" + this.pageCount);
      // console.log("页数" + this.nowPage);
      this.getall();
    },
    handleSelectionChange(val) {
      this.ids = [];
      this.multipleSelection = val;
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.ids.push(this.multipleSelection[i].id);
      }
      console.log(this.ids);
    },
    alldelete() {
      // console.log("删除所有");
      this.$confirm("此操作将删除选中所有登陆日志, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.axios({
            method: "post",
            url: "/loginLog/deleteByIds",
            data: {
              ids: this.ids,
            },
          }).then((res) => {
            console.log(res);
            this.getall();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    timeTransfer(timestamp) {
      let time = new Date(timestamp);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      return year + "-" + month + "-" + date + " " + hours + ":" + minute;
    },
    getall() {
      this.axios({
        method: "post",
        url: "/loginLog/list",
        data: {
          page: this.nowPage,
          pageSize: this.pageCount,
        },
      }).then((res) => {
        console.log(res);
        this.count = res.data.count;
        this.tableData = [];
        for (let i = 0; i < res.data.data.length; i++) {
          this.tableData.push(res.data.data[i]);
        }
        for (let i = 0; i < res.data.data.length; i++) {
          this.tableData[i].loginTime = this.timeTransfer(
            res.data.data[i].loginTime
          );
        }
        // console.log(this.tableData);
      });
    },
  },
  created() {
    this.getall();
  },
};
</script>

<style lang='less' scoped>
.fontsize {
  font-size: 1.4rem;
  font-weight: normal;
}

.container {
  border: 1px solid black;
}
.headercontainer {
  padding: 20px;
}
.tablem {
  margin-top: 20px;
}
.border {
  padding: 10px;
  border: rgb(207, 205, 205) solid 1px;
  background-color: white;
}
.tablepad {
  font-size: 1.4rem;
  margin: 5px;
  padding: 5px;
  background-color: #f5f9fc;
  display: flex;
  justify-content: flex-end;
}
.page {
  font-size: 1.4rem;
  margin: 5px;
  padding: 5px;
  background-color: #f5f9fc;
}
</style>